<template>
	<div v-if="key == this.routePath.defaultPath">
		<!-- 列表 -->
		<el-table :data="dataList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
			<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
			<el-table-column label="商品名称" prop="skuName" align="center" width="120px" show-overflow-tooltip></el-table-column>
			<el-table-column label="类目名称" prop="categoryName" align="center" width="120px"></el-table-column>
			<el-table-column label="品牌名称" prop="brandName" align="center" width="120px"></el-table-column>
			<el-table-column label="商品价格" prop="goodsPrice" align="center" width="120px"></el-table-column>
			<el-table-column label="商品主图" prop="masterImage" align="center" width="120px">
				<template slot-scope="scope">
					<img :src="scope.row.masterImage" width="40px" height="40px"/>
				</template>
			</el-table-column>
			<el-table-column label="商品规格" prop="goodsSpec" align="center" width="120px"></el-table-column>
			<el-table-column label="商品状态" prop="goodsStatus" align="center" width="120px">
				<template slot-scope="scope">
					<span v-if="scope.row.goodsStatus == 1">正常</span>
					<span v-if="scope.row.goodsStatus == 2">下架</span>
					<span v-if="scope.row.goodsStatus == 3">删除</span>
				</template>
			</el-table-column>
			<el-table-column label="商品销量" prop="salesVolume" align="center" width="120px"></el-table-column>
			<el-table-column label="商品评论量" prop="commentVolume" align="center" width="120px"></el-table-column>
			<el-table-column label="库存数量" prop="stockNum" align="center" width="120px"></el-table-column>
			<el-table-column label="预警库存数量" prop="alertStockNum" align="center" width="120px"></el-table-column>
			
			<el-table-column label="操作" align="center" width="150" fixed="right">
				<template slot-scope="scope">
					<el-button v-if="permission_edit" type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
					<el-button v-if="permission_delete" type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div v-show="!loading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageForm.pageNum"
				:page-sizes="pageForm.pageSizeSelect" :page-size="pageForm.pageSize" :total="pageForm.totalData" layout="total, sizes, prev, pager, next, jumper"
				:prev-text="pageForm.prevText" :next-text="pageForm.nextText">
			</el-pagination>
		</div>
		
		<el-divider></el-divider>
		<div align="center">
			<el-button type="info" @click="back">返回</el-button>
		</div>
	</div>
	<div v-else>
		<router-view :key="key"></router-view>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { findGoodsSkuList ,deleteGoodsSku} from '@/api/mall/goodsSku'
	export default {
		name: 'goodsSku',
		data() {
			return {
				// 默认加载弹出层
				loading: true,
				//路由地址
				routePath: {
					defaultPath: '/mall/goods/sku',
					editPath: '/mall/goods/sku/edit',
					viewPath: '/mall/goods/sku/view'
				},
				// 数据列表el-table
				dataList: [],
				// 权限按钮控制
				permission_add: false,
				permission_edit: false,
				permission_delete: false,
				permission_view: false,
				// 搜索条件
				searchForm: {
					spuCode: '',
					pageNum: 1,
					pageSize: 10
				},
				//分页相关
				pageForm: {
					pageSizeSelect: [10, 20, 30, 50], //每页显示个数选择器的选项设置
					totalData: 0, //总条数
					pageSize: 10, //每页显示条目个数
					pageNum: 1, //当前页
					prevText: '上一页', //替代图标显示的上一页文字
					nextText: '下一页' //替代图标显示的下一页文字
				}
			}
		},
		computed: {
			key() {
				return this.$route.path
			},
			...mapGetters([
				'elementList'
			])
		},
		components: {},
		created() {
			if (this.$route.path === this.routePath.defaultPath) {
				this.searchForm.spuCode = this.$route.query.spuCode
				// 初始化获取数据列表
				this.getDateList()
				//初始化按钮权限
				this.permission_edit = this.elementList['mall:goods:sku:edit']
				this.permission_delete = this.elementList['mall:goods:sku:delete']
				this.permission_view = this.elementList['mall:goods:sku:detail']
			}
		},
		methods: {
			// 方法集合
			getDateList() {
				this.loading = true
				findGoodsSkuList(this.searchForm).then(res => {
					console.log("请求成功打印日志", res)
					this.dataList = res.data.responseData
					this.pageForm.totalData = parseInt(res.data.total)
				})
				this.loading = false
			},
			handleView(val) {
				this.$router.push({
					path: "this.routePath.viewPath",
					query: {
						id: val
					}
				});
			},
			handleEdit(val) {
				this.$router.push({
					path: "this.routePath.editPath",
					query: {
						id: val
					}
				});
			},
			handleDelete(val){
				this.$confirm('是否要删除当前商品以及所关联的信息?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteGoodsSku(val).then(res => {
						if(res.data.responseCode == 200){
							this.$notify({
								title: '成功',
								message: '删除成功',
								type: 'success',
								duration: 2000,
								onClose: this.getDateList()
							});
						}
					}).catch((err) => {
						this.$message.error(err.data.responseMessage);
					});
				});
			},
			handleCreate() {
				this.$router.push({
					path: "this.routePath.addPath"
				});
			},
			handleSizeChange(val) {
				this.searchForm.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.searchForm.pageNum = val
				this.getDateList()
			},
			//返回上级菜单
			back() {
				this.$router.go(-1)
			},

		}
	}
</script>
